/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-12-13 11:38:55
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-03-18 15:45:53
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\login\index.tsx
 * @Description: 
 */
/*
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-11-04 11:05:11
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2025-03-18 15:34:09
 * @FilePath: \projecte:\学习\react\react-optimize-ts\src\views\login\index.tsx
 * @Description: 
 */
import React, { useEffect, useState, useRef } from 'react'
// import initPaticleBg from './particle3'
import StarSky from './starSky'
import loginStyle from './login.module.scss'
import type { FormProps } from 'antd';
import { Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from 'react-router-dom';


type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
}

export default function index() {
    const canvasRef = useRef<HTMLCanvasElement>(null)
    const Navigate = useNavigate()
    const [isLogin, setIsLogin] = useState(true)
    useEffect(() => {

        // initPaticleBg()
        const element = canvasRef.current
        setTimeout(() => {
            if (element) {
                element.style.display = 'none'
            }

        }, 3000)

        // 监听窗口变化
        window.onresize = () => {
            // initPaticleBg()
        }
    }, [])

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        localStorage.setItem('token', 'helloworld6688')
        Navigate('/')
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const handleRegister = () => {
        setIsLogin(!isLogin)
    }

    return (
        <div className={loginStyle.loginPage}>

            {/* 粒子效果 */}
            <StarSky />

            {/* 登录页面 */}
            <div className={loginStyle.loginWrap}>
                <p className={loginStyle.loginTitle}>
                    {isLogin ? '登录' : '注册'}
                </p>
                {isLogin ?
                    <div className={loginStyle.loginContent}>
                        <Form
                            name="basic"
                            labelCol={{ span: 8 }}
                            wrapperCol={{ span: 16 }}
                            style={{ maxWidth: 600 }}
                            initialValues={{ remember: true }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item<FieldType>
                                label="账号"
                                name="username"
                                rules={[{ required: true, message: '请输入您的账号!' }]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item<FieldType>
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入您的密码!' }]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item<FieldType>
                                name="remember"
                                valuePropName="checked"
                                wrapperCol={{ offset: 8, span: 16 }}
                            >
                                <Checkbox>Remember me</Checkbox>
                            </Form.Item>

                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    :
                    <div className={loginStyle.loginContent}>

                    </div>
                }

                <div className={isLogin ? loginStyle.register : loginStyle.display} onClick={handleRegister}>注册</div>
            </div>
            {/* <canvas id='canvas' ref={canvasRef} className={loginStyle.loginCanvas}>
            </canvas> */}
        </div>
    )
}
